<template>
    <div>
        <MymHeader></MymHeader>
        <MymFloatButton @onFloatBtnClicked="onFloatBtnClicked"></MymFloatButton>
        <MymArticleContent ref="articleContent"></MymArticleContent>

        <!--左侧抽抽屉开始-->
        <el-drawer
                :title="currentCourse.cname"
                size="60%"
                :visible.sync="drawer"
                :direction="direction"
                :before-close="handleClose">

            <div style="text-align: center">
                        <span style="cursor: pointer" @click="allExpand(true)"><i
                                class="el-icon-circle-plus-outline"></i>全部展开</span>
                <span style="cursor: pointer" @click="allExpand(false)"><i
                        class="el-icon-remove-outline"></i>全部收缩</span>
                <hr>
            </div>
            <el-scrollbar style="height:100%">

                <el-tree
                        :data="treeData"
                        node-key="id"
                        ref="selectTree"
                        :props="defaultProps"
                        :default-expand-all="isExpandAll"
                        @node-click="handleNodeClick">
                </el-tree>

            </el-scrollbar>
        </el-drawer>
        <!--左侧抽抽屉结束-->

        <MymNavBar></MymNavBar>
    </div>
</template>

<script>
    import MymNavBar from "@/components/mobile/MymNavBar";
    import MymHeader from "@/components/mobile/MymHeader";
    import MymArticleContent from "@/components/mobile/MymArticleContent";
    import MymFloatButton from "@/components/mobile/MymFloatButton";
    import request from "@/util/request";

    export default {
        name: "MymCourseDetails",
        components: {
            MymHeader,
            MymArticleContent,
            MymFloatButton,
            MymNavBar
        },
        data() {
            return {
                direction: 'ltr',
                drawer: false,
                currentCourseId: this.$route.query.cid,
                currentArticleId: this.$route.query.aid,
                treeData: [],
                isExpandAll: false,
                currentCourse: {},
                //右侧树形菜单的属性
                defaultProps: {
                    children: 'children',
                    id: 'id',
                    articleId: 'articleId'
                }
            }
        },
        mounted() {
            this.initCourseInfo();
        },
        methods: {
            //初始当前课程资料
            initCourseInfo() {
                request.get('/blog/course/details/' + this.currentCourseId).then(resp => {
                    if (resp.data.code === 200) {
                        this.currentCourse = resp.data.data;
                        //初始化树形菜单;
                        this.initCourseChapterMenuList();
                    }
                }).catch(err => {
                    console.log(err);
                })
            },

            //初始化当前课程的章节菜单列表
            initCourseChapterMenuList() {
                request.get('/blog/chapter/' + this.currentCourseId).then(resp => {
                    if (resp.data.code === 200) {
                        this.treeData = resp.data.data;
                    } else {
                        this.treeData = [];
                    }
                }).catch(err => {
                    console.log(err);
                })
            },

            handleNodeClick(data, node) {
                if (node.isLeaf) {
                    this.currentArticleId = data.articleId + '';
                    //初始化当前文章对象。
                    //this.initArticle(this.currentArticleId);
                    //console.log('点击后最新文章编号：'+this.currentArticleId);
                    this.$refs.articleContent.refreshArticleContent(this.currentArticleId);
                }
            },

            handleClose(done) {
                done();
            },
            onFloatBtnClicked(flag) {
                this.drawer = flag
            },

            //是否全部展开
            allExpand: function (flag) {
                let treeList = this.treeData;
                for (let i = 0; i < treeList.length; i++) {
                    this.$refs.selectTree.store.nodesMap[treeList[i].id].expanded = flag;
                }
            }
        }
    }
</script>

<style scoped>
    .el-icon-chat-dot-square {
        font-size: 20px;
    }

    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }

    .el-scrollbar__wrap {
        overflow-x: hidden;
    }

    .el-scrollbar .el-scrollbar__wrap {
        overflow-x: hidden;
    }

    .el-tree > .el-tree-node {

        /*height: 350px;*/
        min-width: 100%;
        display: inline-block;
    }

    /*1.显示滚动条：当内容超出容器的时候，可以拖动：*/
    /*不添加scoped的修改方式*/
    /*
    .el-drawer__body {
        overflow: auto;

    }*/

    /*添加scoped的修改方式，使用 >>>穿透*/
    .el-row >>> .el-drawer__body {
        overflow: auto;

    }
</style>